<template>
	<el-row :gutter="16">
		<el-col
			v-for="(processItem, processIndex) in ruleForm.processList"
			:key="processIndex"
			:span="12"
			style="margin-bottom: 16px;"
		>
			<jk-card :show-header="true" :header-style="{background: '#f8f8f9', borderBottom: 'solid 1px #e6ebf5'}" :body-style="{background: '#f8f8f9', padding: '16px',}">
				<div slot="header" class="width-100-percent">
					<div class="flex-between-center width-100-percent">
						<div style="color: #17233d;font-size: 18px;">
							<span class="el-icon-paperclip item-gap"></span>
							<span>{{ processItem.processName }}</span>
						</div>
						<div>
							<span style="font-size: 13px;margin-right: 12px;">报工: {{ processItem.processShiftQty || 0 }}KG</span>
							<span style="font-size: 13px;">称重: {{ processItem.processNetWeight || 0 }}KG</span>
						</div>
					</div>
				</div>
				<div class="" style="height: 140px;">
					<div style="border-bottom: solid 1px #eee;width: 100%;margin-bottom: 10px;font-size: 14px;height: 34px;line-height: 34px;">
						<el-row>
							<!--<el-col :span="8">
								<div>
									<span>产量(kg): </span>
									<span>{{ processItem.processShiftQty }}</span>
								</div>
							</el-col>-->
							<el-col :span="8">
								<div>
									<span>能耗(kw·h): </span>
									<span>{{ processItem.processShiftElectricEnergy }}</span>
								</div>
							</el-col>
							<el-col :span="8">
								<div>
									<span>工资: </span>
									<span>{{ processItem.ddd || 0 }}</span>
								</div>
							</el-col>
							<el-col :span="8">
								<div>
									<span>总工时(h): </span>
									<span>{{ processItem.totalWorkHours }}</span>
								</div>
							</el-col>
						</el-row>
					</div>
					<div style="display: flex;flex-wrap: wrap;">
						<div v-for="(machineItem, machineIndex) in processItem.productOrderMachineList" :key="machineIndex" style="width: calc(100% / 6)">
							<machine-info-popover
								:process-item="processItem"
								:machine-item="machineItem"
							></machine-info-popover>
						</div>
					</div>
				</div>
			</jk-card>
		</el-col>
	</el-row>
</template>

<script>
    import calHeight from '/src/mixins/cal-dialog-height';
    import { openStateList } from '../../../../../utils/jk/status-option-list';
    import machineInfoPopover from '../machine-info-popover';
    export default {
        props: {
            height: {
                type: Number,
                default: 0
            },
            formData: {
                type: Object,
                default() {
                    return {};
                }
            }
        },
        mixins: [calHeight],
        components: {
            machineInfoPopover
        },
        data() {
            return {
                openStateList: openStateList,
                ruleForm: {}
            };
        },
        methods: {
            getData() {
                this.ruleForm = JSON.parse(JSON.stringify(this.formData));
            }
        },
        mounted() {
            this.getData();
        },
        watch: {
            formData: {
                handler() {
                    this.getData();
                },
                deep: true
            }
        }
    };
</script>
